<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录界面</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="./css/styles.css">
</head>
<body>
    <div class="page-container">
        <div class="login-container">
            <div class="login-header">
                <h2>用户登录</h2>
                <div class="switch-form">
                    <button type="button" class="switch-btn active" data-form="login">登录</button>
                    <button type="button" class="switch-btn" data-form="register">注册</button>
                </div>
            </div>
            <form id="loginForm" class="form-active">
                <div class="form-group">
                    <label for="username">账号</label>
                    <input type="text" id="username" required placeholder="请输入账号">
                </div>
                <div class="form-group">
                    <label for="password">密码</label>
                    <input type="password" id="password" required placeholder="请输入密码">
                </div>
                <div class="form-group">
                    <label for="captcha">验证码</label>
                    <div class="captcha-container">
                        <input type="text" id="captcha" required placeholder="请输入验证码" maxlength="4">
                        <div class="captcha-image-container">
                            <img id="captchaImage" alt="验证码">
                            <button type="button" class="refresh-btn" title="刷新验证码">
                                <i class="fas fa-sync-alt"></i>
                            </button>
                        </div>
                    </div>
                </div>
                <button type="submit" id="loginBtn" disabled>登录</button>
            </form>
            <form id="registerForm" style="display: none;">
                <div class="form-group">
                    <label for="reg-username">账号</label>
                    <input type="text" id="reg-username" required placeholder="请输入账号">
                </div>
                <div class="form-group">
                    <label for="reg-password">密码</label>
                    <input type="password" id="reg-password" required placeholder="请输入密码">
                </div>
                <div class="form-group">
                    <label for="reg-confirm-password">确认密码</label>
                    <input type="password" id="reg-confirm-password" required placeholder="请再次输入密码">
                </div>
                <div class="form-group">
                    <label for="reg-email">邮箱</label>
                    <input type="email" id="reg-email" required placeholder="请输入邮箱">
                </div>
                <div class="form-group">
                    <label for="reg-phone">手机号码</label>
                    <input type="tel" id="reg-phone" required placeholder="请输入手机号码">
                </div>
                <div class="form-group">
                    <label for="reg-captcha">验证码</label>
                    <div class="captcha-container">
                        <input type="text" id="reg-captcha" required placeholder="请输入验证码" maxlength="4">
                        <div class="captcha-image-container">
                            <img id="regCaptchaImage" alt="验证码">
                            <button type="button" class="refresh-btn" title="刷新验证码">
                                <i class="fas fa-sync-alt"></i>
                            </button>
                        </div>
                    </div>
                </div>
                <button type="submit" id="registerBtn" disabled>注册</button>
            </form>
        </div>
    </div>

    <!-- 内存监控按钮和图表容器 -->
    <div class="memory-monitor">
        <button class="monitor-btn" title="内存监控">
            <i class="fas fa-microchip"></i>
        </button>
    </div>
    <div class="memory-chart-container">
        <div class="chart-header">
            <span class="chart-title">内存使用情况</span>
            <button class="chart-close" title="关闭">×</button>
        </div>
        <div class="charts-wrapper">
            <div class="chart-section">
                <h3>内存使用趋势</h3>
                <div id="memoryTrendChart"></div>
            </div>
            <div class="chart-section">
                <h3>进程内存占用</h3>
                <div id="processChart"></div>
            </div>
        </div>
    </div>

    <!-- 天气监控按钮和图表容器 -->
    <div class="weather-monitor">
        <button class="weather-btn" title="天气预览">
            <i class="fas fa-cloud-sun"></i>
        </button>
    </div>
    <div class="weather-chart-container">
        <div class="chart-header">
            <div class="chart-title-section">
                <span class="chart-title">珠海天气数据</span>
                <div class="date-picker-container">
                    <input type="month" id="weatherMonth" class="weather-date-picker">
                </div>
            </div>
            <div class="chart-actions">
                <button class="export-btn" title="导出图表">
                    <i class="fas fa-download"></i>
                </button>
                <button class="preview-pdf-btn" title="预览PDF">
                    <i class="fas fa-file-pdf"></i>
                </button>
                <button class="chart-close" title="关闭">×</button>
            </div>
        </div>
        <div class="charts-wrapper">
            <div id="weatherChart"></div>
        </div>
    </div>

    <!-- PDF预览容器 -->
    <div class="pdf-preview-overlay">
        <div class="pdf-preview-container">
            <button class="pdf-close-btn">×</button>
            <iframe id="pdfViewer" width="100%" height="100%" frameborder="0"></iframe>
        </div>
    </div>

    <!-- 论坛按钮和容器 -->
    <div class="forum-monitor">
        <button class="forum-btn" title="匿名论坛">
            <i class="fas fa-comments"></i>
        </button>
    </div>
    <div class="forum-overlay">
        <div class="forum-container">
            <div class="forum-header">
                <span class="forum-title">匿名论坛</span>
                <div class="forum-actions">
                    <div class="forum-tabs">
                        <button class="tab-btn active" data-tab="latest">最新评论</button>
                        <button class="tab-btn" data-tab="hot">热门评论</button>
                    </div>
                    <button class="forum-close-btn" title="关闭">×</button>
                </div>
            </div>
            <div class="comment-input-area">
                <textarea id="commentContent" placeholder="说点什么吧..."></textarea>
                <button id="submitComment">发表评论</button>
            </div>
            <div class="comments-container">
                <div id="commentsList"></div>
                <div class="pagination-controls">
                    <div class="page-size-control">
                        <label for="commentsPerPage">每页显示：</label>
                        <select id="commentsPerPage">
                            <option value="5">5条</option>
                            <option value="10" selected>10条</option>
                            <option value="20">20条</option>
                            <option value="custom">自定义</option>
                        </select>
                        <div class="custom-page-size" style="display: none;">
                            <input type="number" id="customPageSize" min="1" max="100" placeholder="输入条数">
                            <button id="applyCustomPageSize">确定</button>
                        </div>
                    </div>
                    <button class="prev-page" disabled>上一页</button>
                    <span class="page-info">第<span class="current-page">1</span>页</span>
                    <button class="next-page" disabled>下一页</button>
                </div>
            </div>
            <div class="hot-comments-ranking" style="display: none;">
                <h3>热门评论排行榜</h3>
                <div id="rankingList"></div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
    <script src="./js/auth.js"></script>
    <script src="./js/avatar.js"></script>
    <script src="./js/forum.js"></script>
    <script src="./js/main.js"></script>
</body>
</html> 